<template>
   <div class="page-box">
      <div class="page-title">
         <div>客户等级</div>
         <div>
            <el-button @click="dialogRef?.openLoading()" color="#6860FF">
               新增客户等级
            </el-button>
            <el-button @click="deleteSelected" color="#6860FF" :disabled="selectedIds.length === 0">
               删除所选数据 ({{ selectedIds.length }})
            </el-button>
         </div>
      </div>
   </div>
   <div class="page-search">
      <el-input placeholder="等级名称/编号" style="width: 200px; margin-right: 10px; margin-bottom: 10px" v-model="pageData.keywords"
         suffix-icon="Search" />
   </div>
   <div class="table-box">
      <el-table :data="tabeData" style="width: 100%" v-loading="loading" border
         @selection-change="handleSelectionChange">
         <el-table-column type="selection" width="55" align="center" />
         <el-table-column align="center" prop="name" label="等级名称" width="auto " />
         <el-table-column align="center" prop="no" label="编号" width="auto" />
         <el-table-column align="center" prop="note" label="备注" width="auto" />
         <el-table-column align="center" prop="creator_name" label="创建人" width="auto" />
         <el-table-column align="center" prop="created_at" label="创建时间" width="auto" />
         <el-table-column align="center" prop="zip" label="操作" width="auto">
            <template #default="scope">
               <el-button size="small" @click="dialogRef?.openLoading(scope.row)">编辑</el-button>
               <el-button size="small" type="danger" @click="deleteCustomerLevel(scope.row.id)">删除</el-button>
            </template>
         </el-table-column>
      </el-table>
   </div>
   <CustomerGrade ref="dialogRef" @getCustomerLevelList="getCustomerLevelList" />
   <!-- 分页 -->
   <Pagination class="pagination" @pageSize="pageSize" @getPage="getPage" :page="pageData.page"
      :page-size="pageData.pageSize" :total="total" />
</template>

<script setup lang="ts">
import api from "@/api";
import { ref, onMounted, watch } from "vue";
import CustomerGrade from "./components/CustomerGrade.vue";
import { ElMessage, ElMessageBox } from "element-plus";

const dialogRef = ref<any>(null);
const dateRange = ref<string[]>([]);
const pageData = ref({
   pageSize: 10,
   page: 1,
   keywords: "",
});
const total = ref(0);
const tabeData = ref([]);
const selectedIds = ref<any[]>([]);
// 获取客户等级列表
const getCustomerLevelList = async () => {
   const res = await api.customerLevel.getcustomerList({ ...pageData.value });
   if (res.code === 200) {
      tabeData.value = res.data.data;
      total.value = res.data.pager.total_records;
   }
};

// 获取所选数据
const handleSelectionChange = (e: any) => {
   selectedIds.value = e.map((item: any) => item.id);
};

// 删除单个客户等级
const deleteCustomerLevel = async (id: any) => {

   ElMessageBox.confirm("确定删除该客户等级吗？", "提示", {
      confirmButtonText: "确定",
      cancelButtonText: "取消",
      type: "warning",
   }).then(async () => {
      const res = await api.customerLevel.deletecustomer([id]);
      if (res.code === 200) {
         ElMessage.success("删除成功");
         getCustomerLevelList();
      }
   });
};

// 删除所选数据
const deleteSelected = () => {
   if (selectedIds.value.length === 0) {
      ElMessage.warning("请选择要删除的数据");
      return;
   }

   ElMessageBox.confirm(`确定删除选中的 ${selectedIds.value.length} 条数据吗？`, "提示", {
      confirmButtonText: "确定",
      cancelButtonText: "取消",
      type: "warning",
   }).then(async () => {
      const res = await api.customerLevel.deletecustomer(selectedIds.value);
      if (res.code === 200) {
         ElMessage.success(`成功删除 ${selectedIds.value.length} 条数据`);
         selectedIds.value = [];
         getCustomerLevelList();
      }
   });
};

// 侦听动态分页
watch(
   () => {
      return pageData.value;
   },
   () => {
      getCustomerLevelList();
   },
   { deep: true }
);
const pageSize = (e: number) => {
   pageData.value.pageSize = e;
};
const getPage = (e: number) => {
   pageData.value.page = e;
};

onMounted(() => {
   getCustomerLevelList();
});

const loading = ref(false);
</script>

<style lang="scss" scoped>
.btn-box {
   display: flex;
   align-items: center;
   justify-content: center;
}

.page-title {
   display: flex;
   align-items: center;
   justify-content: space-between;
   padding: 10px 20px;
}

// 输入框样式
::v-deep .el-input__wrapper {
   background-color: rgba(250, 252, 251, 1);
}

//表格样式

::v-deep .el-table {
   --el-table-header-bg-color: rgba(235, 236, 240, 1);
}

::v-deep .el-table thead {
   color: #444;
}

//分页样式
.pagination {
   width: calc(100% - 250px);
   position: fixed;
   bottom: 20px;
   right: 20px;
   padding-top: 10px;
   border-top: 1px solid #98989848;
}

::v-deep .el-pagination.is-background .el-pager li.is-active {
   background-color: #000 !important;
}

:deep(.el-checkbox__input.is-checked .el-checkbox__inner) {
   background-color: #6860ff;
   border-color: #6860ff;
}

:deep(.el-checkbox__inner:hover) {
   border-color: #626aef !important;
}

:deep(.el-checkbox__input.is-indeterminate .el-checkbox__inner) {
   background-color: #6860ff;
}

:deep(.el-checkbox__input.is-indeterminate .el-checkbox__inner) {
   border-color: #6860ff;
}

:deep(.el-button:hover) {
   background-color: #e2e4fd;
   color: #6860ff;
}

:deep(.el-input__wrapper:hover) {
   box-shadow: inset 0 0 0 1px #6860ff;
}

:deep(.el-button:hover) {
   background-color: #e2e4fd;
   color: #6860ff;
}

.deepPurple {
   color: #7a60fe;
   margin-left: 10px;
}

.amount-statistics {
   display: flex;
   justify-content: start;
   align-items: center;
   padding: 10px 20px;
   background-color: #f2f2f2;
   margin-top: 20px;
   border-radius: 5px;

   .amount-statistics-item {
      display: flex;
      align-items: center;
      justify-content: center;
      margin-right: auto;
   }
}
</style>
